<template v-if="formControl">
	<view :style="formControl.style" class="lib-component__selector">
		<lib-selector-label ref="libSelectorLabelRef" :formControl="formControl" />
		<view class="lib-component__selector-content">
			<view @click.stop="openOpts" class="selector-box select-box" :style="formControl.selectorStyle">

				<view class="select-label">
					<view v-if="selectedLabel===''" class="select-placeholder">{{ formControl.placeholder }}</view>
					<view v-else class="select-label-value">{{ selectedLabel }}</view>
				</view>
				<text class="iconfont icon-xiala4 menu-down"></text>
				<view v-if="showOpts" @click.stop="closeOpts" class="lib-component__selector--mask"></view>
				<view v-if="showOpts" :class="position" class="lib-component__selector--options">
					<view v-for="(opt, index) in options" @click.stop="() => select(opt)" :key="index"
						:class="opt.disabled ? 'disabled' : ''" class="opt">
						{{ opt.label }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Selector
	} from "../../utils/utils/selector.js";
	import libSelectorLabel from '../lib-selector-label/lib-selector-label.vue';
	export default {
		name: 'lib-selector-select',
		components: {
			libSelectorLabel,
		},
		emit: [],
		props: {
			formControl: {
				type: Object,
				default: () => {
					return null;
				},
				required: true,
			}
		},
		data() {
			return {
				/** 显示 options */
				showOpts: false,
				value: null,
				/** 选中的label */
				selectedLabel: '',
				/** 选择数据 */
				options: [],
				/** options 位置 top | bottom */
				position: 'top',
				/** 节点查询 */
				nodeSelector: new Selector(this),
			}
		},
		methods: {
			async openOpts() {
				/** 窗口高度 */
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				const res = await this.nodeSelector.boundingClientRect('.select-label');
				/** select-label top */
				const top = res.top;
				/** select-label height */
				const selectLabelHeight = res.height;
				/** 选择框高度 */
				const optionsHeight = this.options.length * 35;
				// console.log(`windowHeight:${windowHeight}, top：${top}, selectLabelHeight:${selectLabelHeight}, optionsHeight:${optionsHeight}`);
				if ((top + selectLabelHeight + optionsHeight) > windowHeight) {
					this.position = 'bottom';
				} else {
					this.position = 'top';
				}
				this.showOpts = true;
			},
			closeOpts() {
				this.showOpts = false;
			},
			init() {
				// this.nodeSelector = new Selector(this);
				this.value = this.formControl.value;
				this.formControl.valueChange((value) => {
					this.value = value;
				});
				const options = this.formControl.options || [];
				this.options = options;
				this.setRangeByValue(this.value);
			},
			clear() {
				this.formControl.value = '';
				this.value = '';
			},
			/** 通过 index 设置 range*/
			setRangeByIndex(idx) {
				const options = this.formControl.options || [];
				const option = options[idx];
				if (option) {
					this.value = option.value;
					this.selectedLabel = option.label;
					// option.disabled = true;
				}
			},
			/** 通过 value */
			setRangeByValue(val) {
				const options = this.formControl.options || [];
				const option = options.find(opt => opt.value === val);
				if (option) {
					this.value = option.value;
					this.selectedLabel = option.label;
					// option.disabled = true;
				}
			},
			select(opt) {
				if(opt.disabled){
					return;
				}
				this.options.forEach((opt)=>{
					// opt.disabled = false;
				});
				const val = opt.value;
				this.setRangeByValue(val);
				this.formControl.value = val;
				this.closeOpts();
			}
		},
		mounted() {
			this.init();
			// console.log(this.formControl);
		},
		watch: {},
	}
</script>




<style lang="scss" scoped>
	@import "../selector.scss";
</style>